<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>个人中心</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <link rel="stylesheet" type="text/css" href="css/address.css">
    <link rel="stylesheet" type="text/css" href="css/flower.css">
    <link rel="stylesheet" type="text/css" href="css/flowerYang.css">
    <link rel="stylesheet" type="text/css" href="css/flowerShen.css">
    <link rel="stylesheet" type="text/css" href="css/collect.css">
    <link rel="stylesheet" type="text/css" href="css/order.css">
    <link rel="stylesheet" type="text/css" href="css/viewDetails.css">

    <style type="text/css">
    .order-pay:hover{
        color: white;
    }
    .delete-address-icon {
        margin: 36px auto 12px;
        display: block;
    }
    .delete-address-title {
        text-align: center;
        font-size: 21px;
        color: #232628;
        margin-bottom: 32px;
    }
    .consigneeModal-btn {
        width: 108px;
        text-align: center;
        height: 36px;
        line-height: 36px;
        color: white;
        font-size: 13px;
        background: #FF734C;
        background: linear-gradient(90deg, #FF734C 0%, #FF3D12 100%);
        border-radius: 20px;
        display: inline-block;
        cursor: pointer;
    }
    .consigneeModal-btn-grey {
        color: #71797F;
        background: #FFFFFF;
        border: 1px solid #E9ECF0;
    }

    </style>
</head>
<body class="home">
<%@ include file="GeTop.jsp"%>
<!-- 导航 End -->
<div class="main clearfix">
    <div class="main-container">
        <div class="breadcrumbs">
            <a href="/">首页</a> &gt; <a href="/Member/MemberCenter/">会员中心</a>
            &gt; <a href="/Member/MemberCenter/">会员中心</a>
        </div>
        <div class="wrapper about">
            <div class="pull-left right-main">
                <!--中间部分  -->
                <c:forEach items="${orderXiang}" var="o">
                    <input type="hidden" id="deleteOid" value="${o.id}">
                <div class="order-status-main order-block">
                    <div class="order-status-header">
                        <img src="//img02.hua.com/pc/personal_center_new/order-status-icon.png" alt="" class="order-status-icon">
                        <c:if test="${o.orderstate==1}">
                            <span class="order-status-text">待付款</span>
                        </c:if>
                        <c:if test="${o.orderstate==2}">
                            <span class="order-status-text">待发货</span>
                        </c:if>
                        <c:if test="${o.orderstate==3}">
                            <span class="order-status-text">待收货</span>
                        </c:if>
                        <c:if test="${o.orderstate==4}">
                            <span class="order-status-text">已完成</span>
                        </c:if>
                        <c:if test="${o.orderstate==5}">
                            <span class="order-status-text">已取消</span>
                        </c:if>
                        <c:if test="${o.orderstate==6}">
                            <span class="order-status-text">今日配送</span>
                        </c:if>
                        <span class="order-id">订单号:${o.id}</span>
                        <span class="order-date">下单时间: ${o.orderdate} </span>
                        <c:if test="${o.orderstate==1}">
                        <span class="order-cancel" id="quxiao">取消订单</span>
                        <span class="order-card-edit">改贺卡备注</span>
                        <a href="/Member/Payment/BalanceFill?orderid=353867445&amp;orderamount=1950&amp;sign=b047bc40ee4b0fea3d817514b4bd5601" class="order-pay">立即付款</a>
                        </c:if>
                    </div>
                    <div class="order-status-list">
                        <div class="order-status-left">
                            <div class="order-list-left-item active">包裹1</div>
                        </div>
                        <div class="order-status-right" style="display: block">
                            <div class="order-status-shop">
                            <span class="order-shop-title">
                                <span style="float: left">商</span>
                                <span style="float: right">品: </span>
                            </span>
                            </div>
                            <div class="logistics">
                                <div class="logistics-list" data-toggle="false">
                                    <div class="logistics-item-block">
                                        <c:if test="${o.orderstate==5}">
                                        <div class="logistics-item active">
                                            <div class="logistics-item-split">
                                                <div class="logistics-item-split-dot"></div>
                                                <div class="logistics-item-split-line"></div>
                                            </div>
                                            <div class="logistics-item-info">
                                                <p class="logistics-item-info-desc">订单已取消，可重新下单</p>
                                                <p class="logistics-item-info-time">${o.orderdate}</p>
                                            </div>
                                            </div>
                                            </c:if>
                                            <c:if test="${o.orderstate==1}">
                                                <div class="logistics-item active">
                                                    <div class="logistics-item-split">
                                                        <div class="logistics-item-split-dot"></div>
                                                        <div class="logistics-item-split-line"></div>
                                                    </div>
                                                    <div class="logistics-item-info">
                                                        <p class="logistics-item-info-desc">订单已提交，待支付</p>
                                                        <p class="logistics-item-info-time">${o.orderdate}</p>
                                                    </div>
                                                </div>
                                            </c:if>
                                            <c:if test="${o.orderstate==2}">
                                                <div class="logistics-item active">
                                                    <div class="logistics-item-split">
                                                        <div class="logistics-item-split-dot"></div>
                                                        <div class="logistics-item-split-line"></div>
                                                    </div>
                                                    <div class="logistics-item-info">
                                                        <p class="logistics-item-info-desc">订单已付款，待发货</p>
                                                        <p class="logistics-item-info-time">${o.orderdate}</p>
                                                    </div>
                                                </div>
                                            </c:if>
                                        <c:if test="${o.orderstate==3}">
                                            <div class="logistics-item active">
                                                <div class="logistics-item-split">
                                                    <div class="logistics-item-split-dot"></div>
                                                    <div class="logistics-item-split-line"></div>
                                                </div>
                                                <div class="logistics-item-info">
                                                    <p class="logistics-item-info-desc">订单已发货，待确认</p>
                                                    <p class="logistics-item-info-time">${o.orderdate}</p>
                                                </div>
                                            </div>
                                        </c:if>

                                        <c:if test="${o.orderstate==4}">
                                            <div class="logistics-item active">
                                                <div class="logistics-item-split">
                                                    <div class="logistics-item-split-dot"></div>
                                                    <div class="logistics-item-split-line"></div>
                                                </div>
                                                <div class="logistics-item-info">
                                                    <p class="logistics-item-info-desc">订单已完成</p>
                                                    <p class="logistics-item-info-time">${o.orderdate}</p>
                                                </div>
                                            </div>
                                        </c:if>

                                        </div>
                                    <div class="logistics-item-hide" style="display: none;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order-info">
                    <div class="order-info-block order-block" style="margin-right: 12px;position: absolute;height: 183px;">
                        <img class="envelope-strip" src="//img02.hua.com/pc/personal_center_new/envelope-strip.png" alt="">
                        <div class="order-info-title">收货信息</div>
                        <div class="order-info-user">
                    <span class="order-user-left" style="display: flex;justify-content: space-between;">
                    <span>收</span>
                    <span>货</span>
                    <span>人</span>
                    </span>
                            <span>${o.shouname}</span>
                        </div>
                        <div class="order-info-user">
                            <span class="order-user-left">联系电话</span>
                            <span>${o.shouphone}</span>
                        </div>
                        <div class="order-info-user">
                            <span class="order-user-left">收货地址</span>
                            <span> ${o.shouaddress}</span>
                        </div>
                        <div class="order-info-user">
                            <span class="order-user-left">送达日期</span>
                            <span>
                    ${o.servicedate}
                </span>
                        </div>
                    </div>
                    <div class="order-info-block order-block" style="height: 183px;">
                        <div class="order-info-title">其他信息</div>
                        <div class="order-info-user">
                            <span class="order-user-left">发票信息</span>
                            <span style="cursor: pointer;">不开发票</span>
                        </div>
                        <div class="order-info-user">
                <span class="order-user-left" style="display: flex;justify-content: space-between;">
                    <span>贺</span>
                    <span>卡</span>
                </span>
                            <span style="display: inline-block;width: 354px;word-break: break-all;max-height: 50px;overflow-y: scroll;">无</span>
                        </div>
                    </div>
                </div>
                <div class="pay-detail-main order-block">
                    <c:forEach items="${o.orderDetailsList}" var="od">
                    <div class="pay-detail-block" style="padding-bottom: 24px;">
                        <a href="/product/9012519.html" target="_blank">
                            <img src="image/commodity/${od.commodityDetails.comimage}" height="60" width="60">
                        </a>
                        <a href="/product/9012519.html" class="goods-name" target="_blank">
                            ${od.commodityDetails.comname}
                        </a>
                        <span class="goods-quantity">x${od.num}</span>
                        <span class="goods-money">¥${od.totalPrice}</span>
                    </div>
                    </c:forEach>
                    <div class="additional-block">
                    </div>

                    <div class="actual-pay">
                        <span>实付款</span>
                        <span class="actual-pay-num">￥${o.sumPrice}</span>
                    </div>
                </div>
                <!--中间到这 -->
                </c:forEach>
            </div>

            <!--隐藏div  -->
                <div class="modal fade cancel-collection in" id="ding" style="display: none;">
                    <div class="modal-dialog" style="width: 312px;height:228px;margin-top: 290px;">
                        <div class="modal-content" style="padding-bottom: 36px;">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span id="colse">×</span></button>
                            <img src="https://img02.hua.com/pc/Images/2021new/address-delete-icon.png" alt="" class="delete-address-icon">
                            <div class="delete-address-title">确定取消该订单吗?</div>
                            <div class="consigneeModal-btns">
                                <div class="c-btn consigneeModal-btn consigneeModal-btn-grey"id="close" style="width:108px;margin: 0 24px 0 36px;">取消</div>
                                <div class="c-btn consigneeModal-btn" id="cancel-collection-submit" style="width:108px;">确定</div>
                            </div>
                        </div>
                    </div>
                </div>
            <!--隐藏div到这  -->
            <!-- 导流-->
            <div class="customer">
                <div class="customer-service customer-service-open">
                    <div class="customer-service-title">我是您的专属助理</div>
                    <img class="customer-service-img"
                         src="https://img02.hua.com/wxmp/hua/wx-code.png">
                    <div class="customer-service-sub">扫描二维码加我微信</div>
                    <div class="customer-service-hi">Hi~</div>
                    <div class="customer-service-close">
                        <div class="line"></div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <%@include file="GeLeft.jsp"%>
        </div>
    </div>
</div>
<!-- 尾部导航 -->
<%@ include file="bottom.jsp"%>

<script type="text/javascript" src="//img02.hua.com/pc/js/common.js"></script>
<script type="text/javascript" src="js/flower.js"></script>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    $(function (){
        $("#quxiao").click(function (){
            $("#ding").show();
        });
        /*
        获取页面div的值，点击切换样式
         */

        /*
        获取div的属性值，点击改变a标签的链接，并且自动触发
         */
        $(".nav-item").click(function (){
            let zhi=$(this).attr("value");
            $("#orderDd").attr("href","user/orderServlet.shtml?zt="+zhi);
            $("#orderDd")[0].click();
        });

        $("#colse").click(function (){
            $("#ding").hide();
        });
        $("#close").click(function (){
            $("#ding").hide();
        });
        $("#cancel-collection-submit").click(function (){
            let id=$("#deleteOid").val();
            $.ajax({
                url:"UpdateStateServlet.shtml",
                type:"get",
                data:{"id":id},
                success:function (relust){
                    $("#ding").hide();
                    if (relust){
                        alert("取消成功");
                        location.reload();
                    }else{
                        alert("取消失败");
                    }

                }
            })
        });

    });
</script>

</body>
